<template>
  <div class="tic-tac-toe-game">
    <!-- 背景特效 -->
    <div class="particles-background"></div>

    <!-- 移动端顶部导航 -->
    <div class="mobile-header" v-if="isMobile">
      <el-button :icon="iconMenu" @click="toggleMenu" class="menu-btn"></el-button>
      <h2 class="app-title">井字棋对战</h2>
    </div>

    <!-- 主网格布局 -->
    <div class="grid-container">
      <!-- 用户信息区域（移动端侧边菜单） -->
      <div class="user-panel" :class="{'mobile-active': showMenu}">
        <UserProfile />
        <div class="mobile-menu-items" v-if="isMobile">
          <button @click="activePanel = 'game'; showMenu = false">
            <i class="icon-game"></i> 游戏
          </button>
          <button @click="activePanel = 'chat'; showMenu = false">
            <i class="icon-chat"></i> 聊天
          </button>
          <button @click="activePanel = 'status'; showMenu = false">
            <i class="icon-info"></i> 状态
          </button>
        </div>
      </div>

      <!-- 游戏主区域（桌面端和移动端主内容） -->
      <div class="game-panel" v-if="!isMobile || activePanel === 'game'">
        <div class="panel-header">
          <div class="header-left">
            <h2 class="game-title">
              <i class="icon-game"></i>
              井字棋对战
            </h2>
            <div class="game-info-display">
              <div class="room-id-card">
                <span class="room-id-label">房间ID:</span>
                <span class="room-id-value">{{ roomId }}</span>
              </div>
              <div class="player-turn-badge" :class="{ 'your-turn': isYourTurn }">
                <i class="icon-turn"></i>
                {{ turnStatusText }}
              </div>
            </div>
          </div>
          <div class="header-right">
            <div class="connection-status" :class="{ connected: isConnected }">
              <span class="status-dot"></span>
              {{ isConnected ? '已连接' : '连接中...' }}
            </div>
          </div>
        </div>

        <div class="game-board">
          <div
              v-for="(cell, index) in board"
              :key="index"
              class="cell"
              :class="{
              'x-cell': cell === 'X',
              'o-cell': cell === 'O',
              'disabled': !canMakeMove(index),
              'winner-cell': winningCells.includes(index)
            }"
              @click="makeMove(index)"
          >
            <span class="cell-content">{{ cell }}</span>
          </div>
        </div>

        <div class="game-actions">
          <button
              @click="leaveGame"
              class="btn-leave"
          >
            离开游戏
          </button>
          <button
              v-if="gameOver"
              @click="resetGame"
              class="btn-reset"
          >
            再来一局
          </button>
        </div>
      </div>

      <!-- 聊天区域（桌面端和移动端切换显示） -->
      <div class="chat-panel" v-if="!isMobile || activePanel === 'chat'">
        <ChatWindow />
      </div>

      <!-- 游戏状态区域（桌面端和移动端切换显示） -->
      <div class="status-panel" v-if="!isMobile || activePanel === 'status'">
        <div class="status-card">
          <h3 class="status-title">游戏状态</h3>
          <div class="status-content">
            <div class="status-item">
              <span class="status-label">当前回合:</span>
              <span class="status-value">{{ currentPlayerName }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">你的符号:</span>
              <span class="status-value" :class="playerSymbol === 'X' ? 'x-text' : 'o-text'">
                {{ playerSymbol }}
              </span>
            </div>
            <div class="status-item">
              <span class="status-label">游戏状态:</span>
              <span class="status-value" :class="gameStatusClass">
                {{ gameStatusText }}
              </span>
            </div>
          </div>
        </div>
        <div class="players-card">
          <h3 class="players-title">玩家列表</h3>
          <div class="players-list">
            <div
                v-for="player in players"
                :key="player.id"
                class="player-item"
                :class="{
                'current-player': player.id === currentPlayerId,
                'you': player.id === userId
              }"
            >
              <span class="player-symbol" :class="player.id === userId ?
                (playerSymbol === 'X' ? 'x-text' : 'o-text') :
                (playerSymbol === 'X' ? 'o-text' : 'x-text')">
                {{ player.id === userId ? playerSymbol : opponentSymbol }}
              </span>
              <span class="player-name">{{ player.username }}</span>
              <span v-if="player.id === hostId" class="host-badge">房主</span>
              <span v-if="player.id === userId" class="you-badge">你</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 移动端菜单遮罩层 -->
<!--    <div class="menu-overlay"-->
<!--         :class="{'active': showMenu}"-->
<!--         @click="showMenu = false"-->
<!--         v-if="isMobile">-->
<!--    </div>-->
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import UserProfile from '../../homeView/components/UserProfile.vue'
import ChatWindow from '../../homeView/components/ChatWindow.vue'
import { ElMessage } from 'element-plus'
import config from '@/config.js'
import {useRoom} from "@/views/homeView/composables/useRoom.js";
import {useRoomStore} from "@/stores/room.js";
import {Menu} from "@element-plus/icons-vue";

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 游戏状态
const board = ref(Array(9).fill(''))
const currentPlayerId = ref(null)
const winnerId = ref(null)
const gameOver = ref(false)
const winningCells = ref([])
const isConnected = ref(false)

// 玩家信息
const userId = computed(() => userStore.userId)
const username = computed(() => userStore.username)
const roomId = ref(useRoom().roomId)
const playerSymbol = ref(null)
const opponentSymbol = ref(null)
const opponentId = ref(null)
const hostId = ref(null)
const players = ref([])

// WebSocket 连接
const socket = ref(null)

// 移动端相关状态
const showMenu = ref(false)
const activePanel = ref('game')
const windowWidth = ref(window.innerWidth)
const iconMenu = Menu

const isMobile = computed(() => windowWidth.value < 768)

const toggleMenu = () => {
  showMenu.value = !showMenu.value
}

const handleResize = () => {
  windowWidth.value = window.innerWidth
  if (windowWidth.value >= 768) {
    showMenu.value = false
  }
}

// 计算属性
const isHost = computed(() => userId.value === hostId.value)
const isYourTurn = computed(() => currentPlayerId.value === userId.value && !gameOver.value)
const opponentName = computed(() => {
  const opponent = players.value.find(p => p.id !== userId.value)
  return opponent?.username || '等待对手'
})

const currentPlayerName = computed(() => {
  if (gameOver.value) return '游戏结束'
  return currentPlayerId.value === userId.value ? '你的回合' : `${opponentName.value}的回合`
})

const turnStatusText = computed(() => {
  if (gameOver.value) return '游戏结束'
  return isYourTurn.value ? '轮到你了' : '对手回合'
})

const gameStatusText = computed(() => {
  if (!currentPlayerId.value) return '等待游戏开始...'
  if (gameOver.value) {
    if (!winnerId.value) return '平局!'
    return winnerId.value === userId.value ? '你赢了!' : '你输了!'
  }
  return isYourTurn.value ? '你的回合' : '对手回合'
})

const gameStatusClass = computed(() => {
  if (gameOver.value) {
    return winnerId.value === userId.value ? 'win-text' :
        winnerId.value ? 'lose-text' : 'draw-text'
  }
  return isYourTurn.value ? 'your-turn-text' : 'opponent-turn-text'
})

const canMakeMove = (index) => {
  return !gameOver.value &&
      isYourTurn.value &&
      board.value[index] === ''
}

// 初始化WebSocket连接
const initWebSocket = () => {
  const wsUrl = `${config.apiWsUrl}/ws/TicTacToe`
  socket.value = new WebSocket(wsUrl)

  socket.value.onopen = () => {
    console.log('WebSocket连接已建立')
    isConnected.value = true
    // 发送设置用户ID的消息
    socket.value.send(JSON.stringify({
      type: 'setId',
      userId: userId.value
    }))
    socket.value.send(JSON.stringify({
      type: 'startGame',
      roomId: roomId.value,
      playerList: players.value
    }))
  }

  socket.value.onmessage = (event) => {
    try {
      const data = JSON.parse(event.data)
      console.log('收到消息:', data)
      handleMessage(data)
    } catch (e) {
      console.error('消息解析错误:', e)
    }
  }

  socket.value.onclose = () => {
    console.log('WebSocket连接已关闭')
    isConnected.value = false
    if (!gameOver.value) {
      ElMessage.error('连接已断开')
      router.push('/home')
    }
  }

  socket.value.onerror = (error) => {
    console.error('WebSocket错误:', error)
    isConnected.value = false
    ElMessage.error('连接服务器失败')
  }
}

// 处理收到的消息
const handleMessage = (data) => {
  switch (data.type) {
    case 'startGame':
      handleStartGame(data)
      break
    case 'newStep':
      handleNewStep(data)
      break
    case 'endGame':
      handleEndGame(data)
      break
    case 'playerLeave':
      const playerId = data.playerId
      players.value = players.value.filter(player => player.id !== playerId)
      if (playerId === userId.value) {
        ElMessage.warning('你已离开游戏')
        router.push('/home')
      } else {
        ElMessage.warning(data.message)
      }
      break
    default:
      console.log('未知消息类型:', data.type)
  }
}

// 处理游戏开始
const handleStartGame = (data) => {
  players.value = data.playerList
  currentPlayerId.value = data.firstPlayerId

  // 确定自己和对手
  const me = data.playerList.find(p => p.id === userId.value)
  const opponent = data.playerList.find(p => p.id !== userId.value)
  opponentId.value = opponent?.id || null

  // 确定房主
  hostId.value = data.playerList[0].id

  // 分配符号 (先手是X)
  playerSymbol.value = currentPlayerId.value === userId.value ? 'X' : 'O'
  opponentSymbol.value = currentPlayerId.value === userId.value ? 'O' : 'X'

  // 重置游戏状态
  board.value = Array(9).fill('')
  winnerId.value = null
  gameOver.value = false
  winningCells.value = []
}

// 处理新步骤
const handleNewStep = (data) => {
  const [row, col] = data.newstep.split(',').map(Number)
  const index = row * 3 + col

  // 确定下棋的符号
  const symbol = data.nextPlayerId === userId.value ? opponentSymbol.value : playerSymbol.value
  board.value[index] = symbol

  currentPlayerId.value = data.nextPlayerId
  checkGameStatus()
}

// 处理游戏结束
const handleEndGame = (data) => {
  winnerId.value = data.winnerId
  gameOver.value = true
  highlightWinningCells()
}

// 高亮显示获胜的格子
const highlightWinningCells = () => {
  if (!winnerId.value) return

  const winCombos = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8], // 横排
    [0, 3, 6], [1, 4, 7], [2, 5, 8], // 竖排
    [0, 4, 8], [2, 4, 6] // 对角线
  ]

  for (const combo of winCombos) {
    const [a, b, c] = combo
    if (board.value[a] &&
        board.value[a] === board.value[b] &&
        board.value[a] === board.value[c]) {
      winningCells.value = combo
      return
    }
  }
}

// 检查游戏状态
const checkGameStatus = () => {
  const winCombos = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8], // 横排
    [0, 3, 6], [1, 4, 7], [2, 5, 8], // 竖排
    [0, 4, 8], [2, 4, 6] // 对角线
  ]

  // 检查胜利条件
  for (const combo of winCombos) {
    const [a, b, c] = combo
    if (board.value[a] &&
        board.value[a] === board.value[b] &&
        board.value[a] === board.value[c]) {
      const winnerSymbol = board.value[a]
      const winner = winnerSymbol === playerSymbol.value ? userId.value : opponentId.value
      endGame(winner)
      return
    }
  }

  // 检查平局
  if (board.value.every(cell => cell !== '')) {
    endGame(null)
  }
}

// 结束游戏
const endGame = (winnerId) => {
  socket.value.send(JSON.stringify({
    type: 'endGame',
    roomId: roomId.value,
    playerList: players.value,
    winnerId: winnerId
  }))
}

// 玩家下棋
const makeMove = (index) => {
  if (!canMakeMove(index)) return

  const row = Math.floor(index / 3)
  const col = index % 3

  socket.value.send(JSON.stringify({
    type: 'newStep',
    roomId: roomId.value,
    playerId: userId.value,
    playerList: players.value,
    newstep: `${row},${col}`
  }))

  // 本地更新棋盘
  board.value[index] = playerSymbol.value
}

// 离开游戏
const leaveGame = () => {
  if (socket.value && socket.value.readyState === WebSocket.OPEN) {
    socket.value.send(JSON.stringify({
      type: 'leaveGame',
      roomId: roomId.value,
      playerId: userId.value
    }))
    socket.value.close()
  }
  router.push('/home')
}

// 重置游戏
const resetGame = () => {
  socket.value.send(JSON.stringify({
    type: 'startGame',
    roomId: roomId.value,
    playerList: players.value
  }))
}

// 生命周期
onMounted(() => {
  players.value=useRoomStore().players
  initWebSocket()
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  if (socket.value) {
    socket.value.close()
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.tic-tac-toe-game {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;

  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.particles-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-size: cover;
  opacity: 0.3;
}

/* 移动端顶部导航 */
.mobile-header {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: rgba(26, 26, 46, 0.9);
  backdrop-filter: blur(5px);
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-header .menu-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  margin-right: 15px;
  padding: 5px;
}

.mobile-header .app-title {
  color: white;
  font-size: 18px;
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "user game chat"
    "user game status";
  gap: 20px;
  padding: 20px;
  height: 100%;
  position: relative;
  z-index: 1;
}

.user-panel {
  grid-area: user;
  background: rgba(26, 26, 46, 0.8);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.game-panel {
  grid-area: game;
  background: rgba(22, 33, 62, 0.7);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.chat-panel {
  grid-area: chat;
  background: rgba(26, 26, 46, 0.8);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  height: 350px;
  min-height: 350px;
  max-height: 350px;
  overflow: hidden;
}

.status-panel {
  grid-area: status;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 12px;
  background: rgba(76, 201, 240, 0.1);
  border: 1px solid rgba(76, 201, 240, 0.2);
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-title {
  margin: 0;
  font-size: 1.5rem;
  color: #4cc9f0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-game {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234cc9f0"><path d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-10 7H8v3H6v-3H3v-2h3V8h2v3h3v2zm4.5 2c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4-3c-.83 0-1.5-.67-1.5-1.5S18.67 9 19.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>') no-repeat center;
}

.game-info-display {
  display: flex;
  align-items: center;
  gap: 15px;
}

.room-id-card {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: rgba(26, 26, 46, 0.8);
  border-radius: 8px;
  border: 1px solid rgba(76, 201, 240, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.room-id-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 8px;
}

.room-id-value {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 1px;
  color: #4cc9f0;
}

.player-turn-badge {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  gap: 6px;
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

.player-turn-badge.your-turn {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}

.icon-turn {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>') no-repeat center;
}

.connection-status {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
  gap: 6px;
}

.connection-status.connected {
  background: rgba(76, 201, 240, 0.2);
  color: #4cc9f0;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6b6b;
}

.connection-status.connected .status-dot {
  background: #4cc9f0;
  box-shadow: 0 0 8px #4cc9f0;
}

.game-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  aspect-ratio: 1/1;
  max-width: 500px;
  max-height: 500px;
  margin: 0 auto;
  flex: 1;
  width: min(60vh, 60vw, 700px);
  height: min(86vh, 60vw, 700px);
}

.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(26, 26, 46, 0.8);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(76, 201, 240, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cell:hover:not(.disabled)::before {
  opacity: 1;
}

.cell.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.cell.winner-cell {
  background: rgba(76, 175, 80, 0.3);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.cell-content {
  font-size: 3rem;
  font-weight: bold;
  position: relative;
  z-index: 1;
}

.x-cell .cell-content {
  color: #2196F3;
  text-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

.o-cell .cell-content {
  color: #F44336;
  text-shadow: 0 0 10px rgba(244, 67, 54, 0.5);
}

.game-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  justify-content: center;
}

.btn-leave, .btn-reset {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-leave {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

.btn-leave:hover {
  background: rgba(255, 107, 107, 0.3);
  transform: translateY(-2px);
}

.btn-reset {
  background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
  color: white;
}

.btn-reset:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(106, 17, 203, 0.4);
}

.status-card, .players-card {
  background: rgba(26, 26, 46, 0.8);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
}

.status-title, .players-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.2rem;
  color: #4cc9f0;
  border-bottom: 1px solid rgba(76, 201, 240, 0.3);
  padding-bottom: 8px;
}

.status-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.status-value {
  font-weight: 500;
  color: #e2e2e2;
}

.win-text {
  color: #4caf50;
}

.lose-text {
  color: #f44336;
}

.draw-text {
  color: #ffc107;
}

.your-turn-text {
  color: #4cc9f0;
}

.opponent-turn-text {
  color: #ff9800;
}

.x-text {
  color: #2196F3;
  font-weight: bold;
}

.o-text {
  color: #F44336;
  font-weight: bold;
}

.players-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.player-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.player-item.current-player {
  background: rgba(76, 201, 240, 0.1);
  border-left: 3px solid #4cc9f0;
}

.player-item.you {
  background: rgba(106, 17, 203, 0.1);
}

.player-symbol {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 10px;
}

.player-name {
  flex: 1;
}

.host-badge, .you-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 8px;
}

.host-badge {
  background: rgba(76, 201, 240, 0.2);
  color: #4cc9f0;
}

.you-badge {
  background: rgba(106, 17, 203, 0.2);
  color: #6a11cb;
}

/* 移动端菜单项 */
.mobile-menu-items {
  padding: 15px;
}

.mobile-menu-items button {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  color: white;
  text-align: left;
  font-size: 16px;
}

.mobile-menu-items button.active {
  background: rgba(52, 152, 219, 0.3);
}

.mobile-menu-items i {
  margin-right: 10px;
}

/* 移动端菜单遮罩层 */
.menu-overlay {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 15;
  display: none;
}

.menu-overlay.active {
  display: block;
}

/* 移动端适配 */
@media (max-width: 767px) {
  .tic-tac-toe-game{
    padding: 0;
    height: 100%;
    width: 100vw;
  }
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "game";
    padding: 15px;
    padding-top: 75px;
  }

  .user-panel {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    z-index: 20;
  }

  .user-panel.mobile-active {
    transform: translateX(0);
  }

  .chat-panel, .status-panel {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 26, 46, 0.95);
    z-index: 10;
    padding: 20px;
    overflow-y: auto;
  }

  .game-panel {
    min-height: calc(100vh - 90px);
  }

  .game-board {
    width: 100%;
    height: auto;
    max-width: 400px;
    max-height: 400px;
    aspect-ratio: 1/1;
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .game-info-display {
    flex-wrap: wrap;
  }

  .header-right {
    width: 100%;
    justify-content: flex-end;
    display: flex;
  }
}

/* 平板适配 */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-container {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "user game";
  }

  .chat-panel, .status-panel {
    display: none;
  }
}
</style>